<template>
    <div class="beitieDetail">
        <el-alert title="此版本下的内容为空，快去新增一些数据吧。" type="warning"  center show-icon v-if="ImgcontentLs.length==0"  />
        <el-card class="box-card">
            <div class="header">
                <div>
                    <el-icon size="24" style="cursor: pointer;" @click="() => { router.back() }">
                        <Back />
                    </el-icon>
                    <span>|</span>
                    <a>查看版本</a>
                </div>
                <div></div>
            </div>
            <div class="main">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div>
                        <el-button type="primary" @click="uploadImgs(activeName)">上传</el-button>
                        <el-button type="primary" @click="BatchMent()">
                            <span v-if="ShowCheckbox">取消管理</span>
                            <span v-else>管理</span>
                        </el-button>
                    </div>
                    <div v-show="ShowCheckbox">
                        <el-checkbox v-model="form.checkall" @change="allCheck($event)"></el-checkbox>
                        <span style="margin: 0 10px;">全选</span>
                        <span style="margin: 0 10px;">已选 {{ CountCheckNum() }} 张</span>
                        <el-button type="primary" @click="alldelete">
                            删除
                        </el-button>
                    </div>
                </div>
                <div class="mainHead">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane :label="items.name" :name="items.id" v-for='items of typelist'>
                            <div class="searchArea" v-show="activeName == 1">
                                <div>
                                    <el-input v-model="word" class="w-50 m-2" clearable @clear="getcontCate()"
                                        placeholder="搜索目录" @keydown.enter="getcontCate()" :prefix-icon="Search" />
                                </div>
                                <div
                                    style="display: flex;justify-content: space-between; padding: 0 10px;box-sizing: border-box;">
                                    <span>
                                        全部
                                    </span>
                                    <span>
                                        <el-icon @click="addCate">
                                            <Plus size="25" />
                                        </el-icon>
                                    </span>
                                </div>
                                <div>
                                    <el-popover placement="bottom" trigger="contextmenu"
                                        v-for="(item, index) of CatecontentLs" :key="index">
                                        <template #reference>
                                            <!-- 碑刻、单字的 分类项 -->
                                            <div :class="activeCate_item_title == index ? 'content_cate_item activeCateItemTitle' : 'content_cate_item'"
                                                @click="filterCate(item.id, index)" @drop="dragdrop($event, item)"
                                                @dragover="deagOver($event)">
                                                <span>{{ item.name }}</span>
                                                <!-- <span>{{ item.children.length }}</span> -->
                                            </div>
                                        </template>
                                        <template #default>
                                            <div style="font-size: 12px;">
                                                <p @click="rename(item)">重命名</p>
                                                <p @click="clickDelete(item.id)">删除</p>
                                            </div>
                                        </template>
                                    </el-popover>
                                    <el-empty :image-size="100" image="/empty.png" v-if="CatecontentLs.length==0" />
                                </div>
                            </div>
                            <div class="mainBody">
                                <!-- 内容列表 -->
                                <div class="contentlist">
                                    <!-- 这里渲染的 应该是得通过分类的id 再去查 -->
                                    <div class="content_item" v-for="(item, index) of ImgcontentLs" :draggable="item.check"
                                        @dragstart="dragStart($event, item)" @dragend="drageEnd($event)"
                                        @dragover="SortOver($event, item)" @drop="SortDrop($event, item)">
                                        <dt class="box1">
                                            <div class="checkManage">
                                                <el-checkbox v-model="item.check" v-show="ShowCheckbox"></el-checkbox>
                                            </div>
                                            <div class="box2" @click="showThisPicture($event, item, index)">
                                                <span @click="delPicture($event, item)">删除</span>
                                                <span @click="setFengmian($event, item)">设置为封面</span>
                                            </div>
                                            <img :src="item.imgs" alt="" style="width: 100%;height: 100%;">
                                        </dt>
                                        <li>{{ item.name || "" }}</li>
                                    </div>
                                </div>
                                <el-empty :image-size="200" v-if="ImgcontentLs.length==0" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-card>
        <!-- 新增框 -->
        <el-dialog v-model="form.cateDialogVisible" title="新增" width="40%" :before-close="addCatehandleClose">
            <el-form ref="ruleFormRef" :model="form.cateform" :rules="form.caterules" label-width="120px"
                class="demo-ruleForm" status-icon>
                <el-form-item prop="name" label="目录">
                    <el-input v-model="form.cateform.name" placeholder="请填写" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.cateDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitformCate(ruleFormRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 重命名框 -->
        <el-dialog v-model="form.reCatenameDialogVisible" title="重命名" width="38%"
            :before-close="() => { form.reCatenameDialogVisible = false }">
            <el-form ref="ruleFormRef" :model="form.cateform" :rules="form.caterules" label-width="120px"
                class="demo-ruleForm" status-icon>
                <el-form-item prop="rename" label="目录">
                    <el-input v-model="form.cateform.rename" placeholder="请填写" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.reCatenameDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="renameCate(ruleFormRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 图片详情框 -->
        <el-dialog v-model="form.DetailDialogVisible" title="详情" width="70%" height="80%"
            :before-close="() => { form.DetailDialogVisible = false }">
            <div class="detailsBox">
                <div class="ELIMG">
                    <!-- <el-carousel height="450px" :prev="PrevCarousel" :next="NextCarousel" :autoplay="false"> -->
                    <!-- <el-carousel-item v-for="item of ImgcontentLs"> -->
                    <img id="detailImg" :src="ImgcontentLs[form.PictureIndex].imgs" alt="">
                    <button id="leftbutton" @click="PrevCarousel">
                        <span>
                            <el-icon>
                                <ArrowLeft />
                            </el-icon>
                        </span>
                    </button>
                    <button id="rightbutton" @click="NextCarousel">
                        <span>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </span>
                    </button>

                </div>
                <div class="FORMS" v-show="activeName == 1">
                    <div>
                        <p>名称：</p>
                        <el-input v-model="form.detailName" />
                    </div>
                    <div>
                        <p>释译：</p>
                        <el-input maxlength="150" v-model="form.detailsDesc" style="min-height: 100px;" show-word-limit type="textarea" />
                    </div>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="saveImgInfo()">保存</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 单个删除目录分类框 -->
        <el-dialog v-model="form.delCateDialogVisible" title="删除" width="30%" center>
            <span>
                您确定要删除这个数据吗？
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.delCateDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="deleteCate()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 上传碑帖 -->
        <el-dialog v-model="form.uploadImgDialogVisible" title="上传" width="40%">
            <div>
                <el-form ref="ruleFormRef" :model="form.contentIMGS" :rules="form.rules" label-width="120px"
                    class="demo-ruleForm" status-icon>
                    <el-form-item label="图片" prop="imgs">
                        <el-upload class="avatar-uploader" action="/dev-api/api/uploadimg/" :show-file-list="false"
                            :on-success="uploadhandleAvatarSuccess">
                            <img v-if="form.contentIMGS.imgs" :src="form.contentIMGS.imgs" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="图片名称" prop="name" v-if="activeName == 1">
                        <el-input v-model="form.contentIMGS.name" />
                    </el-form-item>
                    <el-form-item label="详情" prop="details" v-if="activeName == 1">
                        <el-input v-model="form.contentIMGS.details" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.uploadImgDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadsubmitForm(activeName, ruleFormRef)">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 是否设置为封面确认框 -->
        <el-dialog v-model="form.isdFenegmianDialog" title="设置封面" width="40%"
            :before-close="() => { form.isdFenegmianDialog = false }">
            <div style="display: flex; justify-content: space-between;align-items: center;">
                <span>是否设置为封面？</span>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.isdFenegmianDialog = false">取消</el-button>
                    <el-button type="primary" @click="editFengmian()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 是否删除此图片信息 -->
        <el-dialog v-model="form.isdeletePictureDialog" title="删除" width="40%"
            :before-close="() => { form.isdFenegmianDialog = false }">
            <div style="display: flex; justify-content: space-between;align-items: center;">
                <span>删除后不可恢复了，确定要执行操作吗？</span>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.isdeletePictureDialog = false">取消</el-button>
                    <el-button type="primary" @click="deleteThisImg()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, unref } from 'vue'
import { Back, Search, Plus, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, TabsPaneContext, UploadProps } from 'element-plus'
// import Lunbo from ''
import axios from 'axios';
import request from '@/utils/request';
let route = useRoute()
let vid:any = ref("")//路由上的id

let router = useRouter()
const goBack = () => {
    router.back()
}
const ruleFormRef = ref<FormInstance>()
let form:any = reactive({
    cateDialogVisible: false,//添加分类目录对话框
    DetailDialogVisible: false,//点击图片查看详情的对话框
    delCateDialogVisible: false, //删除目录对话框
    uploadImgDialogVisible: false,//只上传碑帖的 对话框
    eitherImgDialogVisible: false,//除碑帖外其他的类型 上传对话框
    isdFenegmianDialog: false,//是否设置封面
    isdeletePictureDialog: false,//是否删除此图片信息
    delCateid: "",//删除的分类id
    rules: {
        imgs: [
            { required: true, message: '请上传图片信息', trigger: 'blur' },
        ],
        name: [
            { required: true, message: '请输入图片的名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度是3-30', trigger: 'blur' },
        ],
        details: [
            { required: true, message: '请输入图片的释译', trigger: 'blur' },
            { min: 3, max: 50, message: '长度是3-50', trigger: 'blur' },
        ],
    },
    caterules: {
        name: [
            { required: true, message: '请输入分类的名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度是3-15', trigger: 'blur' },
        ],
        rename: [
            { required: true, message: '请输入分类的名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度是3-15', trigger: 'blur' },
        ],
    },
    cateform: {
        name: "",
        rename: "",//重命名框的绑定属性
    },
    // 上传图片表单
    contentIMGS: {
        imgs: "",
        details: "",
        name: "",
        type: "",
        e: "",
        classify: ""
    },
    reCatenameDialogVisible: false,//重命名目录对话框
    reid: "",//重命名框绑定的目录id
    checkall: false,//批量管理全选,
    cateids: 1,//默认第一条id
    picid: "",//图片的id，可用来设置封面，和删除
    detailimg: "",//打开详情、设置封面、删除后赋值的图片的路径
    detailName: "",//打开图片详情时的图片名称
    detailsDesc: "",//打开图片详情时的图片描述
    PictureIndex: 0,//切换图片时 当前展示列表的 下标
})
let ShowCheckbox = ref(false)//展示右侧的选中状态

let CatecontentLs:any = ref([])//左侧分类的展示列表 --- 反向查询
let ImgcontentLs:any = ref([]) //右侧展示的 是一个经过了 id查询的 列表
let word = ref("")

let activeName:any = ref(1)//激活的tab页
let activeCate_item_title = ref(0)
// tab 点击监听事件
const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = tab.props.name//改变tab 切换 
    selectShowFirst()
    // getcontCate()
    // 把批量管理初始化
    ShowCheckbox.value = false
}
// 获取碑帖、单字分类项的，方法。
const getcontCate = async () => {
    let { id } = route.query
    vid.value = id
    // 这里应该做个筛选，筛选得到的是碑帖，还是，单字
    // 根据tab 的激活属性 来进行判断    
    // CatecontentLs.value = data.filter((item: any) => { return item.cate == activeName.value })
    let { data } = await request.get(`/api/tabletworks/TabletEditionDetailsClassifyList?id=${id}&schema=${word.value}`)
    CatecontentLs.value = data
    form.cateids = data[0].id//找到第一条id 进行加载它的图片列表
    // filterCate(activeCate_item_title,form.cateids)
}
// 确定添加左侧碑帖分类
let submitformCate = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let data:any = await request.post(`/api/tabletworks/TabletEditionDetailsClassifyList?id=${vid.value}&name=${form.cateform.name}`)
            getcontCate()
            form.cateDialogVisible = false
            ElMessage.info(data.msg)
            form.cateform = {}
        } else {
            ElMessage.error("目录名称不能为空")
        }
    })
}
// 确定重命名
let renameCate = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let data:any = await request.put(`/api/tabletworks/TabletEditionDetailsClassifyUpd?id=${form.reid}&name=${form.cateform.rename}`)
            getcontCate()
            ElMessage.info(data.msg)
            form.reCatenameDialogVisible = false
        } else {
            ElMessage.error("目录名称不能为空")
        }
    })

}
// 单点删除分类目录
let clickDelete = (id: any) => {
    form.delCateDialogVisible = true;
    form.delCateid = id
}
// 确定删除一个分类目录
let deleteCate = async () => {
    let data:any = await request.delete(`/api/tabletworks/TabletEditionDetailsClassifyDel?id=${form.delCateid}`);
    ElMessage.info(data.msg)
    form.delCateDialogVisible = false
    getcontCate()
}

// 筛选 展示右侧内容的方法
let filterCate = async (id: any, i: any) => {
    form.cateids = id//更新最新的分类
    // 关闭批量管理状态
    ShowCheckbox.value = false
    // 更新激活项样式
    activeCate_item_title.value = i
    let cateids = activeName.value == 1 ? form.cateids : 0//加一个判断，因为其他无分类
    let { data } = await request.get(`/api/tabletworks/TabletEditionDetailsList?id=${vid.value}&type=${activeName.value}&classify=${cateids}`)
    data.forEach((item: any) => {
        item.check = false
    });
    ImgcontentLs.value = data
}
//每次切换tab显示第一个分类的数据展示 //后期 连接接口最好不要这样做。//请重新处理逻辑。
let selectShowFirst = async () => {
    activeCate_item_title.value = 0
    filterCate(form.cateids, activeCate_item_title.value)
    // CatecontentLs.value = data.filter((item: any) => { return item.cate == activeName.value })
    // ImgcontentLs.value = CatecontentLs.value[0].children
}
//打开批量管理
let BatchMent = () => {
    ShowCheckbox.value = !ShowCheckbox.value
}
// 打开批量上传，通过tab激活判断上传碑帖还是其他
let uploadImgs = (act: any) => {
    form.uploadImgDialogVisible = true
}
// 上传碑帖图片//确定
let uploadsubmitForm = async (a: any, formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let obj: any = {}
            //当添加为碑帖时
            obj['img'] = form.contentIMGS.imgs;
            obj['details'] = form.contentIMGS.details;
            obj['name'] = form.contentIMGS.name;
            obj['type'] = activeName.value;
            obj['e'] = parseInt(vid.value);
            if (a == 1) {
                obj['classify'] = form.cateids;
            } else {
                obj['classify'] = null//其他无目录所以为0
            }
            console.log(obj);
            
            let data:any = await request.post(`/api/tabletworks/TabletEditionDetailsAdd`, obj)
            ElMessage.info(data.msg)
            getcontCate()
            filterCate(form.cateids, activeCate_item_title.value)
            form.uploadImgDialogVisible = false;
            form.contentIMGS .name="",
            form.contentIMGS.details=""
            form.contentIMGS.imgs=""
        } else {
            ElMessage.error("请完善当前图片的信息，再进行新增。")
        }
    })
}
//图片上传钩子函数
const uploadhandleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    // form.addform.img = URL.createObjectURL(uploadFile.raw!)
    form.contentIMGS.imgs = response.path
}
//全选方法
let allCheck = (e: any) => {
    // 做全选
    ImgcontentLs.value.map((item: any) => {
        return item.check = e
    })
}
// 全选删除
let alldelete = async () => {
    let idls: any = []//可删除的id
    ImgcontentLs.value.filter((item: any) => {
        if (item.check) {
            idls.push({
                id: item.id,
                is_delete: true
            })
        }
    })
    if (idls.length == 0) {
        return ElMessage.info("您还未选中要删除哪张图片")
    }
    let data: any = await request.post(`/api/tabletworks/TabletEditionDetailsDelall`, idls)
    ElMessage.info(data.msg)
    // form.delallDialogvisible = false;
    filterCate(form.cateids, activeCate_item_title.value)
}
//新增分类框
let addCate = async () => { form.cateDialogVisible = true }
// 关闭新增分类框
let addCatehandleClose = () => {
    form.cateDialogVisible = false
}
//重命名
let rename = (row: any) => {
    form.cateform.rename = row.name
    form.reid = row.id
    form.reCatenameDialogVisible = true
}
// 拖拽功能
let CountCheckNum = () => {
    let count = 0
    ImgcontentLs.value.filter((item: any, index: any) => {
        if (item.check) {
            count += 1
        }
    })
    return count
}
//进行拖拽事件
let dragStart = (e: any, row: any) => {
    let idls: any = []
    ImgcontentLs.value.filter((item: any, index: any) => {
        if (item.check) {
            idls.push(item.id ? item.id : item.id)
        }
    })
    // 可以拿到拖拽者的id了
    e.dataTransfer.setData("Text", JSON.stringify(idls));
    e.dataTransfer.setData("sortls", JSON.stringify(idls));
}
// 当拖拽的图片进入到分类
let deagOver = (e: any) => {
    e.preventDefault();
}
// 触碰到分类后结束的事件
let dragdrop = async (e: any, item: any) => {
    let id = item.id
    var datas = JSON.parse(e.dataTransfer.getData("Text"));
    ShowCheckbox.value = false;
    let data:any = await request.post(`/api/tabletworks/updClassify`, {
        id: datas,
        classify_id: id
    })
    ElMessage.info(data.msg)
    getcontCate()
    filterCate(form.cateids, activeCate_item_title.value)
    dragAfterFALSE()
}
// 拖拽排序到目标过程触发Over
let SortOver = (e: any, item: any) => {
    e.preventDefault();
}
// 返回一个排序的列表数据，给后端，键为id，值为下标
let tempSortLS = () => {
    let idls: any = []
    ImgcontentLs.value.forEach((item: any, index: any) => {
        idls.push(
            {
                [item.id ? item.id : item.id]: index
            }
        )
    })
    return idls
}
// 拖拽排序到目标后松开触发
let SortDrop = async (e: any, row: any) => {
    // 1、获取到我要进行拖拽的id
    var datas = JSON.parse(e.dataTransfer.getData("sortls"));
    // 循环找到他把它删掉
    // 定义一个缓存数据下标的列表
    let tempLs: any = []
    let tempDataLs: any = []
    // 页面留下的
    tempLs = ImgcontentLs.value.filter((subline: any) => {
        return !subline.check
    })
    // 缓存的数据
    tempDataLs = ImgcontentLs.value.filter((subline: any) => {
        return subline.check
    })
    ImgcontentLs.value = [...tempLs]
    // 再拿到插入的位置
    let index = ImgcontentLs.value.findIndex((item: any) => {
        return item.id == row.id
    })
    // 解决多个筛选反转
    tempDataLs.reverse().forEach((item: any) => {
        ImgcontentLs.value.splice(index + 1, 0, item)
    })
    // 重新生成当前排序顺序
    tempSortLS()
    let data:any = await request.post(`/api/tabletworks/TabletEditionDetailsUpdSort`, tempSortLS())
    ElMessage.info(data.msg)
    filterCate(form.cateids, activeCate_item_title.value)//更新图片区域数据
    ShowCheckbox.value = false//取消头部状态
    dragAfterFALSE()//取消上次勾选状态
}
// 关闭详情

// 图片单点删
let delPicture = (e: any, row: any) => {
    //修改详情id
    form.picid = row.id
    form.detailimg = row.imgs
    form.isdeletePictureDialog = true
    e.stopPropagation()
    e.preventDefault()
}
// 确定删除此图片
let deleteThisImg = async () => {
    let data:any = await request.delete(`/api/tabletworks/TabletEditionDetailsDel?id=${form.picid}`)
    ElMessage.info(data.msg)
    form.isdeletePictureDialog = false
    filterCate(form.cateids, activeCate_item_title.value)
}
//图片单点设置封面
let setFengmian = (e: any, row: any) => {
    //修改详情id
    form.picid = row.id
    form.detailimg = row.imgs
    e.stopPropagation()
    e.preventDefault()
    form.isdFenegmianDialog = true
}
//大图展示 这个图片详情
let showThisPicture = (e: any, row: any, index: any) => {
    form.DetailDialogVisible = true
    //修改详情id
    form.picid = row.id//当前点击的图片id
    form.detailimg = row.imgs//当前点击的图片地址
    form.detailName = row.name//当前点击的图片名称
    form.detailsDesc = row.details//当前点击的图片详情
    form.PictureIndex = index//当前点击的图片下标    //用于接下来的轮播切换
}
//设置为封面
let editFengmian = async () => {
    let data:any = await request.post(`/api/tabletworks/TabletEditionDetailsSetImg`, { "id": vid.value, "img": form.detailimg })
    ElMessage.info(data.msg)
    form.isdFenegmianDialog = false
}
// 点击详情修改图片信息
let saveImgInfo = async () => {
    let data:any = await request.put(`/api/tabletworks/TabletEditionDetailsUpd/${form.picid}`, {
        name: form.detailName,
        details: form.detailsDesc,
    })
    ElMessage.info(data.msg)
    form.DetailDialogVisible = false
    filterCate(form.cateids, activeCate_item_title.value)
}
//详情框子 切换至上一张轮播
let PrevCarousel = () => {
    if (form.PictureIndex == 0) {
        form.PictureIndex = ImgcontentLs.value.length - 1
    } else {
        form.PictureIndex -= 1
    }
    form.detailName=ImgcontentLs.value[form.PictureIndex].name
    form.detailsDesc=ImgcontentLs.value[form.PictureIndex].details
}
//详情框子 切换至下一张轮播
let NextCarousel = () => {
    if (form.PictureIndex == ImgcontentLs.value.length - 1) {
        form.PictureIndex = 0
    } else {
        form.PictureIndex += 1
    }
    form.detailName=ImgcontentLs.value[form.PictureIndex].name
    form.detailsDesc=ImgcontentLs.value[form.PictureIndex].details
}
let drageEnd = (e: any) => {
}
// 获取碑帖 || 字画 || 单字
let typelist:any = ref([]) //用于循环tab
let getTypes = async () => {
    let { data } = await request.get(`/api/tabletworks/TabletEditionDetailsTypeList`)
    typelist.value = data
}
// 每次拖拽后再重新遍历为false
let dragAfterFALSE = () => {
    ImgcontentLs.value.forEach((item: any) => {
        item.check = false
    })
}
onMounted(() => {
    getcontCate()
    getTypes()
    nextTick(() => {
        selectShowFirst()
        filterCate(form.cateids, 0)
    })
})
</script>
<style lang="scss" scoped>
.beitieDetail {
    width: 100%;
    height: 100%;
    min-width: 950px;

    .header {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;

        div:first-child {
            display: flex;
            align-items: center;

            // 管道线
            span {
                padding: 0 10px;
            }

            // 查看版本字
            a {
                font-size: 14px;
            }
        }
    }

    .main {
        width: 100%;
        height: auto;
        // display: flex;
        margin: 0;

        .mainHead {
            width: 100%;
            height: auto;

            .el-tabs {
                width: 100%;
            }

            .searchArea {
                width: 25%;
                height: 300px;
                border: 1px solid #dedede;

                :deep(.el-input) {
                    width: 90%;
                }
            }
        }
    }
}

// <!-- 碑刻、单字的 分类项 -->
.content_cate_item {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

// 激活的 分类项
.activeCateItemTitle {
    background-color: #d0e7ff;
    opacity: .8;
}

// 仅支持火狐和谷歌，隐藏滚动条但是仍可以滚动内容
.contentlist::-webkit-scrollbar {
    width: 0 !important
}

// 右侧内容
.contentlist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;

    .content_item {
        width: 12%;
        height: 200px;
        margin: 20px 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;


        // ... 字体省略
        li {
            list-style: none;
            width: 98%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        // 做 蒙版图层，显示删除 、设置封面。
        .box1 {
            width: 100%;
            max-height: 60%;
            position: relative;
            margin: 0 auto;

            img {
                object-fit: fill;
            }

            .box2 {
                position: absolute;
                width: 100%;
                border-radius: 3px;
                height: 95%;
                background-color: rgba(34, 34, 34, 0.5);
                background-repeat: no-repeat;
                background-position: center;
                opacity: 0;
                transition: all .6s;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    color: white;
                    font-size: .05em;
                    padding: 0 10px;
                    box-sizing: border-box;
                    cursor: pointer;
                }
            }
        }

        .box1:hover .box2 {
            opacity: 1;
        }
    }
}

// 修改        tab-pabel样化
:deep(.el-tab-pane) {
    display: flex;
    justify-content: space-between;
}

// 右侧布局

.mainBody {
    width: 100%;
    height: 100%;

}

// 选择管理
.checkManage {
    position: absolute;
    left: 5px;
}

// 图片详情，左图片右边是dialog
.detailsBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .ELIMG {
        position: relative;
        width: 35%;
        height: 100%;

        #leftbutton,
        #rightbutton {
            position: absolute;
            top: 45%;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            cursor: pointer;
        }

        #rightbutton {
            right: 5px;
        }

        #leftbutton {
            left: 5px;
        }

        img {
            -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            @-webkit-keyframes slide-in-left {
                0% {
                    -webkit-transform: translateX(-1000px);
                    transform: translateX(-1000px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes slide-in-left {
                0% {
                    -webkit-transform: translateX(-1000px);
                    transform: translateX(-1000px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    opacity: 1;
                }
            }
        }
    }

    .FORMS {
        width: 35%;
        height: 500px;

        div {
            margin: 25px 0;
        }
    }

    /* 详情框子的图片 */
    #detailImg {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}
</style>
<style>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

/* 轮播图大小 */
::v-deep(.el-carousel__container) {
    min-height: 400px;
    height: 400px;
}</style>